<!DOCTYPE HTML>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<html>
<head>
    <title>Muted_Video_Test_Page</title>
</head>
<body>
<p id="testContent">Page content: muted video player</p>
<div class="playbackState">
    <p>Media file not playing</p>
</div>
<div id="video-container" style="text-align:center">
    <button onclick="play()">Play</button>
    <button onclick="pause()">Pause</button>
    <button onclick="fullscreen()">Full Screen</button>
    <br><br>
    <video id="mutedVideo" width="420" autoplay muted controls loop>
        <source src="../resources/clip.mp4" type="video/mp4">
        Your browser does not support HTML video.
    </video>
</div>

<script>
    const mutedVideo = document.getElementById("mutedVideo");

    function play() {
        mutedVideo.play();
    }

    function pause() {
        mutedVideo.pause();
    }

    function fullscreen() {
        mutedVideo.requestFullscreen();
    }

    mutedVideo.addEventListener('playing', (event) => {
     document.querySelector('.playbackState').innerHTML="Media file is playing";
    });

    mutedVideo.addEventListener('pause', (event) => {
        document.querySelector('.playbackState').innerHTML="Media file is paused";
    });
</script>
</body>
</html>
